<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>
<body>
<div>
    <img class="logo" src="{{url_for('static', filename='images/logo1.png')}}" alt="">
</div>
<h3>AI作画</h3>
<form action="/" method="post" onsubmit="return checkForm()">
    <input id="desc" type="text" name="desc" placeholder="请输入描述信息" >
    <button>创作图画</button>
</form>
<!--显示图片-->
<div class="img_area">
    {% if result %}
        <img src="{{ result }}" alt="">
        <div class="download-area">
            <a href="/download?img_url={{result|urlencode}}">
                <button class="download" onclick="alertDownload('正在下载')">下载</button>
            </a>
        </div>
    {% endif %}
</div>
<script>
    function checkForm(){
        // 获取输入框内容
        desc = document.getElementById("desc")
        // 如果为空，则提示错误，不提交表单
        if (desc.value == ''){
            Swal.fire({
              icon: 'error',
              title: 'Oops...',
              text: '请输入描述信息!',
            })
            return false;
        }
        // 弹出正在创作
        alertDownload('正在创作')

    }

    function alertDownload(message){
        Swal.fire(
            message,
            '请稍等片刻!',
            'success'
        )
    }
</script>
</body>
</html>